import PropTypes from 'prop-types'
import React, { memo, useRef, useState } from 'react'
import { ItemWrapper } from './style'
import Rating from '@mui/material/Rating'
import { Carousel } from 'antd';
import IconArrowLeft from '@/assets/svg/icon-arrow-left';
import IconArrowRight from '@/assets/svg/icon-arrow-right';
import Indicator from '@/base-ui/indicator';
import classNames from 'classnames';

const RoomItem = memo((props) => {
    const { itemData, itemWidth, itemClick } = props
    const [selectIndex, setSelectIndex] = useState(0)
    const sliderRef = useRef()

    // 控制器切换图片点击处理
    function controlClickHandle(e, isRight = true) {
        console.log(e);
        e.stopPropagation(); // 阻止事件冒泡
        isRight ? sliderRef.current.next() : sliderRef.current.prev()

        // 最新索引
        let newIndex = isRight ? selectIndex + 1 : selectIndex - 1
        const length = itemData.picture_urls.length
        if (newIndex < 0) newIndex = length - 1
        if (newIndex > length - 1) newIndex = 0
        setSelectIndex(newIndex)
    }

    function itemClickHandle() {
        if (itemClick) itemClick(itemData)
    }

    // 单独照片---用户home单张照片显示
    const pictureElement = (
        <div className="cover">
            <img src={itemData.picture_url} alt="" />
        </div>
    )
    // 多张照片---轮播图应用
    const sliderElement = (
        // {/* 轮播图展示 */ }
        <div div className="slider" >
            <div className="control">
                <div className='btn left' onClick={e => controlClickHandle(e, false)}>
                    <IconArrowLeft width="20" height="20" />
                </div>
                <div className='btn right' onClick={e => controlClickHandle(e, true)}>
                    <IconArrowRight width="20" height="20" />
                </div>
            </div>
            <div className="indicator">
                <Indicator selectIndex={selectIndex}>
                    {
                        itemData?.picture_urls?.map((item, index) => {
                            return (
                                <div className="item" key={item}>
                                    <span className={classNames("dot", { active: selectIndex === index })}></span>
                                </div>
                            )
                        })
                    }
                </Indicator>
            </div >
            {/* 轮播图 */}
            < Carousel dots={false} ref={sliderRef} >
                {
                    itemData?.picture_urls?.map(item => {
                        return (
                            <div className="cover" key={item}>
                                <img src={item} alt="" />
                            </div>
                        )
                    })
                }
            </Carousel >
        </div >
    )

    return (
        <ItemWrapper
            $itemWidth={itemWidth}
            $verifyColor={itemData?.verify_info?.text_color || "#39576a"}
            onClick={itemClickHandle}
        >
            <div className="inner">
                {/* 进行判断是否是单张or多张 */}
                {!itemData.picture_urls ? pictureElement : sliderElement}
                <div className="desc">
                    {itemData.verify_info.messages?.join(" · ")}
                </div>
                <div className="name">{itemData.name}</div>
                <div className="price">￥{itemData.price}/晚</div>

                <div className='buttom'>
                    {/* 评分 */}
                    <Rating
                        value={itemData.star_rating ?? 5}
                        precision={0.5}
                        readOnly
                        sx={{ fontSize: "12px", color: "#008489", marginRight: "-1px" }}
                    />
                    {/* 评论数量+extra超赞 */}
                    <span className='count'>{itemData.reviews_count}</span>
                    {
                        itemData.bottom_info && <span className='extra'>{itemData.bottom_info?.content}</span>
                    }
                </div>
            </div>
        </ItemWrapper>
    )
})

RoomItem.propTypes = {
    itemData: PropTypes.object,
    itemWidth: PropTypes.string
}

export default RoomItem